<!doctype html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>后台登录-X-admin2.2</title>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <!-- <link rel="stylesheet" href="./css/theme5.css"> -->
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>

        <link rel="stylesheet" href="./lib/treetable-lay/treetable.css" />
        <script src="./lib/treetable-lay/treetable.js"></script>
        <![endif]-->

    </head>
    <body class="index">
        <div class="xm">
            <div class="xm-d1">
                <h1 class="layui-text layui-bg-cyan ">
                    <i class="layui-icon layui-icon-username" style="font-size: 30px; color: #1E9FFF;"></i>
                    <span id="username" ></span> : 角色拥有</h1>

            </div>

            <div class="xm-d2">
                <div class="xm-d2-hang1">
                    <div class="pzright" style="width:101%;display: flex;justify-content: flex-start;float:right;">

                    </div>
                    <div class="clear"></div>
                </div>
                <div class="xm-d2-hang2">
                    <table id="permissionTable" class="layui-table" lay-filter="permissionTable"></table>
                </div>
            </div>

        </div>
    </body>
    <script type="text/javascript">

        var id;

        function child(data) {
            //获取节点对象
            $("#username").html(data.username);
            $("#userId").val(data.id);
            id = data.id;

            /*使用模块加载的方式 加载文件*/
            layui.config({
                base: '/lib/'
            }).extend({
                treetable: 'treetable-lay/treetable'
            }).use(['layer', 'table', 'treetable'], function () {
                var $ = layui.jquery;
                var table = layui.table;
                var layer = layui.layer;
                var treetable = layui.treetable;

                // 渲染表格
                var renderTable = function () {//树桩表格参考文档：https://gitee.com/whvse/treetable-lay

                    layer.load(2);
                    treetable.render({
                        treeColIndex: 0,//树形图标显示在第几列
                        treeSpid: 0,//最上级的父级id
                        treeIdName: 'id',//id字段的名称
                        treePidName: 'parentId',//pid字段的名称
                        treeDefaultClose: false,//是否默认折叠
                        treeLinkage: true,//父级展开时是否自动展开所有子级
                        elem: '#permissionTable',
                        url: '/user/queryUserDetails?userId='+id,
                        page: false,
                        cols: [[
                            {field: 'name', title: '用户'},
                            {field: 'url', title: '描述'},
                        ]],
                        done: function () {
                            layer.closeAll('loading');
                        }
                    });
                };

                renderTable();


            })
        };
    </script>

</html>